{% extends "base.html" %}

{% block title %}宾馆管理 - 风之宿{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <div class="flex justify-between items-center mb-8">
  <h1 class="text-3xl font-bold text-primary">宾馆管理</h1>
  {% if session.username == 'hyadmin' %}
    <a href="{{ url_for('admin.manage_room') }}" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary/90 transition-colors">
      添加宾馆
    </a>
  {% endif %}
</div>
<!--这样修改后，只有当当前登录用户的用户名是 hyadmin 时，才会显示 "添加宾馆" 按钮，其他用户将看不到这个按钮，从而限制了只有特定管理员才能添加宾馆的功能。-->
<!--这个条件判断直接使用了 Jinja2 模板引擎的语法，检查 session 中的 username 是否等于指定值，符合条件才渲染 "添加宾馆" 链接。-->


  <!-- 搜索筛选表单 -->
  <div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <form method="GET" action="{{ url_for('admin.manage_rooms') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <!-- 关键词搜索 -->
      <div>
        <label for="keyword" class="block text-sm font-medium text-gray-700 mb-1">关键词</label>
        <input type="text" id="keyword" name="keyword"
               value="{{ search_params.keyword if search_params else '' }}"
               placeholder="宾馆名称或描述"
               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
      </div>

      <!-- 价格范围 -->
      <div>
        <label for="price_range" class="block text-sm font-medium text-gray-700 mb-1">价格范围</label>
        <select id="price_range" name="price_range"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
          <option value="all" {% if search_params and search_params.price_range == 'all' %}selected{% endif %}>所有价格</option>
          <option value="0-200" {% if search_params and search_params.price_range == '0-200' %}selected{% endif %}>¥0 - ¥200</option>
          <option value="200-500" {% if search_params and search_params.price_range == '200-500' %}selected{% endif %}>¥200 - ¥500</option>
          <option value="500-1000" {% if search_params and search_params.price_range == '500-1000' %}selected{% endif %}>¥500 - ¥1000</option>
          <option value="1000+" {% if search_params and search_params.price_range == '1000+' %}selected{% endif %}>¥1000以上</option>
        </select>
      </div>

      <!-- 宾馆类型 -->
      <div>
        <label for="room_type" class="block text-sm font-medium text-gray-700 mb-1">宾馆类型</label>
        <select id="room_type" name="room_type"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
          <option value="all" {% if search_params and search_params.room_type == 'all' %}selected{% endif %}>所有类型</option>
          <option value="standard" {% if search_params and search_params.room_type == 'standard' %}selected{% endif %}>标准间</option>
          <option value="deluxe" {% if search_params and search_params.room_type == 'deluxe' %}selected{% endif %}>豪华间</option>
          <option value="suite" {% if search_params and search_params.room_type == 'suite' %}selected{% endif %}>套房</option>
          <option value="family" {% if search_params and search_params.room_type == 'family' %}selected{% endif %}>家庭房</option>
        </select>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-col justify-end">
        <button type="submit" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary/90 transition-colors mb-2">
          搜索
        </button>
        <a href="{{ url_for('admin.manage_rooms') }}" class="text-center text-gray-600 text-sm hover:text-gray-900">
          重置筛选
        </a>
      </div>
    </form>
  </div>

  <!-- 搜索结果统计和分页信息 -->
  <div class="mb-4 flex flex-col sm:flex-row justify-between items-start sm:items-center">
    <div class="text-sm text-gray-600 mb-2 sm:mb-0">
      {% if search_params and (search_params.keyword or search_params.price_range != 'all' or search_params.room_type != 'all') %}
        找到 <span class="font-medium text-primary">{{ total_items }}</span> 个符合条件的宾馆
        {% if total_items == 0 %}
        <a href="{{ url_for('admin.manage_rooms') }}" class="text-primary hover:underline ml-2">清除筛选条件</a>
        {% endif %}
      {% else %}
        共 <span class="font-medium text-primary">{{ total_items }}</span> 个宾馆
      {% endif %}
    </div>
    <div class="text-sm text-gray-600">
      显示第 <span class="font-medium">{{ start_item }}</span>-<span class="font-medium">{{ end_item }}</span> 条
    </div>
  </div>

  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">宾馆名称</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">价格</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">面积(㎡)</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">图片</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">容纳人数</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          {% for room in rooms %}
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900">{{ room.name }}</div>
                  <div class="text-sm text-gray-500 line-clamp-1">{{ room.description }}</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥{{ room.price }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ room.size }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
              {% if room.image_url %}
                <img src="{{ url_for('static', filename='uploads/' + room.image_url) }}"
                     alt="{{ room.name }}"
                     class="h-16 w-auto object-cover rounded">
              {% else %}
                <img src="{{ url_for('static', filename='images/default-room.png') }}"
                     alt="默认宾馆图片"
                     class="h-16 w-auto object-cover rounded bg-gray-100">
              {% endif %}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ room.capacity }}人</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
              {% if room.room_type == 'standard' %}标准间
              {% elif room.room_type == 'deluxe' %}豪华间
              {% elif room.room_type == 'suite' %}套房
              {% elif room.room_type == 'family' %}家庭房
               {% elif room.room_type == 'game' %}电竞房
              {% else %}{{ room.room_type }}{% endif %}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                {% if room.status == 'available' %}bg-green-100 text-green-800
                {% elif room.status == 'occupied' %}bg-red-100 text-red-800
                {% elif room.status == 'maintenance' %}bg-yellow-100 text-yellow-800
                {% else %}bg-gray-100 text-gray-800{% endif %}">
                {% if room.status == 'available' %}可预订
                {% elif room.status == 'occupied' %}已入住
                {% elif room.status == 'maintenance' %}维护中
                {% else %}{{ room.status }}{% endif %}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
              <a href="{{ url_for('admin.manage_room', room_id=room.id) }}" class="text-primary hover:text-primary/80 mr-3">编辑</a>
              <a href="{{ url_for('admin.delete_room', room_id=room.id) }}" class="text-red-600 hover:text-red-900" onclick="return confirm('确定要删除这个宾馆吗？删除后相关预订数据可能受影响。')">删除</a>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="8" class="px-6 py-10 text-center text-gray-500">
              没有找到符合条件的宾馆
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- 分页控件 -->
  {% if total_pages > 1 %}
  <div class="mt-6 flex justify-center">
    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
      <!-- 上一页 -->
      <a href="{% if current_page > 1 %}{{ url_for('admin.manage_rooms', page=current_page-1, **search_params) }}{% else %}#{% endif %}"
         class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 {% if current_page == 1 %}opacity-50 cursor-not-allowed{% endif %}">
        <span class="sr-only">上一页</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
      </a>

      <!-- 页码 -->
      {% for page_num in page_range %}
        {% if page_num == '...' %}
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
            ...
          </span>
        {% else %}
          <a href="{{ url_for('admin.manage_rooms', page=page_num,** search_params) }}"
             class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium {% if page_num == current_page %}z-10 bg-primary text-white border-primary{% else %}text-gray-700 hover:bg-gray-50{% endif %}">
            {{ page_num }}
          </a>
        {% endif %}
      {% endfor %}

      <!-- 下一页 -->
      <a href="{% if current_page < total_pages %}{{ url_for('admin.manage_rooms', page=current_page+1, **search_params) }}{% else %}#{% endif %}"
         class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 {% if current_page == total_pages %}opacity-50 cursor-not-allowed{% endif %}">
        <span class="sr-only">下一页</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </nav>
  </div>
  {% endif %}
</div>
{% endblock %}